<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/demo_table.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-no-ajax.js"></script>
<script type="text/javascript" src="scripts/jquery.dataTables.js"></script>
<script type="text/javascript" src="scripts/lib.js"></script>
</head>
<body>
	<script type="text/javascript">
		$(function() {
			//var m_id;
			$("th:first-child").hide();
			var isEdit=true;
			productTable = $('#productList').dataTable({
				"bProcessing" : true,
				"sAjaxSource" : "/MAP/PagesUI/dataProduct",
				"oLanguage": {
					"sProcessing": "<img src='images/loading.gif' id='productAdd' alt='Add product'/>",
					 "sEmptyTable" : "No record found",
					"sZeroRecords": "No records found"
		        },
				"fnServerData" : function(sSource, aoData, fnCallback) {
					$.ajax({
						"dataType" : 'json',
						"type" : "GET",
						"url" : sSource,
						"data" : aoData,
						"success" : fnCallback
					});
				},
				"aoColumns" : [ {
					"mData" : "id"
				}, {
					"mData" : "name"
				}, {
					"mData" : "price"
				}, {
					"mData" : "desc"
				}, {
					"mData" : "m_id"
				} ],
				"aaSorting" : [ [ 1, "asc" ] ]
			});
			
			function reloadTable(){
				productTable.fnReloadAjax();		
			}
			
			$("#product-form").dialog({
				autoOpen : false,
				height : 270,
				width : 350,
				modal : true,
				buttons : {
					"Save" : function() {
						
						strPrice = $("#price").val();
						strName=$("#name").val();
						
						if (strName == "") {
							if (!$("#msgName").length) {
								var msgName = '<tr id="msgName"><td colspan="2" align="center">Please enter Product Name</td></tr>';
								$("#name").parent().parent().after(
										msgName);
								$("#msgName").css("color", "red");
							} else {
								$("#msgName").show();
							}
							$("#name").focus();
							return false;
						} else {
							$("#msgName").hide();
						}
						
						
						if (strPrice == "" || isNaN(strPrice)) {
							if (!$("#msgPrice").length) {
								var msgPrice = '<tr id="msgPrice"><td colspan="2" align="center">Please enter price</td></tr>';
								$("#price").parent().parent().after(
										msgPrice);
								$("#msgPrice").css("color", "red");
							} else {
								$("#msgPrice").show();
							}
							$("#price").focus();
							return false;
						} else {
							$("#msgPrice").hide();
						}
						
						
						
						
						
						
						
						
						
						var product = new Object();
						product.id = ($("#id").val());
						product.name = $("#name").val();
						product.price = parseFloat($("#price").val());
						product.desc = $("#description").val();
						product.m_id = ($("#comboboxManufacture option:selected").val());
						if(isEdit){
							alert("editting");
							$.ajax({
					         type: "POST",
					         contentType : "application/json",
					         url: "editProduct",
					         data: JSON.stringify(product),
					         success : function(data) {
					        	 reloadTable();
					         },
					         error: function (request, status, error) {
					             alert(error);
  					         }
					        });
							
						}else{
							//product.m_id = m_id; 		
							$.ajax({
						         type: "POST",
						         url: "addProduct",
						         contentType : "application/json",
						         data: JSON.stringify(product),
						         success : function(data) {
						        	 reloadTable();
						         },
						         error: function (request, status, error) {
						             alert(error);
	  					         }
						        });
						}
					isEdit=true;
					$(this).dialog("close");
					},
					Cancel : function() {
						$(this).dialog("close");
					}
				}
			});

			$("#productList tbody").click(function(event) {
				$(productTable.fnSettings().aoData).each(function() {
					$(this.nTr).removeClass('row_selected');
				});
				$(event.target.parentNode).addClass('row_selected');
			});

			//get hiden data
			//	$("#productList tbody").delegate("tr", "click", function() {
			//		var data = productTable.fnGetData(this);
			//alert("ID is " + data.id);

			//		});

			var asInitVals = new Array();

			$("tfoot input").keyup(
					function() {
						/* Filter on the column (the index) of this element */
						productTable.fnFilter(this.value, $("tfoot input")
								.index(this));
					});

			$("tfoot input").each(function(i) {
				asInitVals[i] = this.value;
			});
			$("tfoot input").focus(function() {
				if (this.className == "search_init") {
					this.className = "";
					this.value = "";
				}
			});

			$("tfoot input").blur(function(i) {
				if (this.value == "") {
					this.className = "search_init";
					this.value = asInitVals[$("tfoot input").index(this)];
				}
			});

			function getManuList(){
				var data="";
				$.ajax({
			         type: "GET",
			         url: "dataManufacturer",
			         contentType : "application/json",
			         success : function(data) {
			        	var listManufacturer=JSON.parse(data).aaData;
			      		 data=listManufacturer;
			      		$('#comboboxManufacture').empty(); 
			      		for(var val in data) {
						    $('<option />', {value: data[val].id, text: data[val].name}).appendTo(s);
						} 
			         },
			         error: function (request, status, error) {
			             alert(error);
				         }
			        });
			}
			
			$('#productAdd').click(function() {
				$('#name').val('');
				$('#price').val('');
				$('#manufacture').val('');
				$('#description').val('');
				$('#product-form').dialog("open");
				isEdit=false;
				getManuList();
				
			});
			$('#productRemove').click(function() {
				var selected = fnGetSelected(productTable);
				if (selected.length == 0) {
					alert('No item selected');
					return;
				}
				var formData = productTable.fnGetData(selected[0]);
				if (confirm("Do you want to delete Product: \" " + formData.name + " \" ?")) {
					 var productId=formData.id;
					$.ajax({
				         type: "POST",
				         url: "deleteProduct",
				         contentType : "application/json",
				         data: productId,
				         success : function(data) {
				        	 reloadTable();
				         },
				         error: function (request, status, error) {
				             alert(error);
					         }
				        });
				//	alert(formData[1] + " is deleted");
				} else {
					alert("No item deleted");
				}
			});
			var s = $('<select name="comboboxManufacture" id="comboboxManufacture"/>');
			s.appendTo('fieldset'); // or wherever it should be
			
			$('#productModify').click(function() {
				getManuList();
				var selected = fnGetSelected(productTable);
				if (selected.length == 0) {
					alert('No item selected');
					return;
				}
				var formData = productTable.fnGetData(selected[0]);
				//alert(''+formData);
				$('#name').val(formData.name);
				$('#price').val(formData.price);
				$('#description').val(formData.desc);
				$('#manufacturer').val(formData.m_id);
				$('#id').val(formData.id);
				$('#product-form').dialog("open");
			});
		});

		//alert('page is loaded and 1 minute has passed');   
		jQuery(window).load(function() {
			setTimeout(function() {
			}, 60000);
		});

		$(document).ajaxComplete(function() {
			$("#tbody td:first-child").hide();
		});
	</script>
	<h2>
		Product <img src="images/add-icon.png" id="productAdd"
			alt="Add product"> <img src="images/remove-icon.png"
			id="productRemove" alt="Remove product"> <img
			src="images/modify-icon.png" id="productModify" alt="Modify product">
	</h2>
	<h1 style="display: none;">Test</h1>
	<table class="display" id="productList">
		<thead>
			<tr>
				<th>ID</th>
				<th>Name</th>
				<th>Price</th>
				<th>Description</th>
				<th>Manufacturer</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<th><input type="text" name="search_code" value="ID"
					class="search_init"></th>
				<th><input type="text" name="search_name" value="Name"
					class="search_init"></th>
				<th><input type="text" name="search_price" value="Price"
					class="search_init"></th>
				<th><input type="text" name="search_type" value="Type"
					class="search_init"></th>
				<th><input type="text" name="search_manufacture"
					value="Manufacture" class="search_init"></th>
			</tr>
		</tfoot>
		<tbody id="tbody">
			<tr>
				<td colspan="5" class="dataTables_empty">Loading data from
					server</td>
			</tr>
		</tbody>

	</table>
	<div id="product-form" title="Product">
		<form>
			<fieldset>
				<label for="name">Product Name</label> <input type="text"
					name="name" id="name" class="text ui-widget-content ui-corner-all" /><br>
				<br> <label for="price">Price</label> <input type="text"
					name="price" id="price"
					class="text ui-widget-content ui-corner-all" /><br> <br>
				<label for="description">Description</label> <input type="text"
					name="description" id="description"
					class="text ui-widget-content ui-corner-all" /><br> <br>
				<!--  
				<label for="manufacturer">Manufacturer</label> <input type="text"
					name="manufacturer" id="manufacturer"
					class="text ui-widget-content ui-corner-all" />
				-->
				<input type="hidden" id="id" value="" />
				<label for="manufacturer" id="labelManu">Manufacturer</label>
			</fieldset>
		</form>
	</div>
</body>
</html>